import React, { useMemo, useCallback } from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom'

import './App.scss'
import { Layout, Menu, Avatar, Badge, Button } from 'antd';
import {
  SearchOutlined,
  UserOutlined,
  EllipsisOutlined
} from '@ant-design/icons';

const { Header, Content, Footer } = Layout;

import Login from '@/view/Login'
import Home from '@/view/Home'
import Reg from '@/view/Reg'
import Exercise from '@/view/Exercise'
import Add from '@/view/Add'
import Mine from '@/view/Mine'
import Company from '@/view/Company'
import Tags from '@/view/Tags'
import Search from '@/view/Search'
import Iqs from '@/view/Iqs'


function App() {

  //点击头像跳转到mine页面
  const changeMine = useCallback(() => {
    Navigate('/mine')
  })
  //头部header导航菜单
  const menu = useMemo(() => {
    return [
      {
        key: '/home',
        label: '首页',
      },
      {
        key: '/exercise',
        label: '练一练',
      },
      {
        key: '/add',
        label: '添加面试题',
      },
      {
        key: '/mine',
        label: '我的',
      },
      // {
      //   key: 'submenu',
      //   selectable: false,
      //   disabled:false,
      //   label: <span style={{ width:'100px',display:'block' }}></span>,
      // },
      // {
      //   key: '/search',
      //   label: <SearchOutlined style={{fontSize:'18px'}}/>,
      // },
      // {
      //   key: 'submenu',
      //   label: <span style={{marginRight:'20px'}}><Badge count={1} size='small'>
      //     <Avatar shape="circle" icon={<UserOutlined/>} size='large' />
      //   </Badge></span>,
      //   children: [
      //     {
      //       label: '1',
      //     }
      //   ]
      // },

    ]
  })
  //二级导航：头像导航菜单
  const items = [
    {
      label: <span style={{ marginRight: '20px' }}><Badge dot size='small'>
        <Avatar shape="circle" icon={<UserOutlined style={{
          fontSize: '18px',
        }} />} size='large' onClick={changeMine} style={{
          backgroundColor: '#ff9900',
          border: '2px solid #fff'
        }} />
      </Badge></span>,
      key: 'SubMenu',
      children: [
        {
          type: 'group',
          children: [
            {
              label: 'wangdong',
              key: 'setting:1',
            },
            {
              label: '个人中心',
              key: 'setting:2',
            },
            {
              label: '我的面试题',
              key: 'setting:3',
            },
            {
              label: '我的回答',
              key: 'setting:4',
            },
            {
              label: '我的收藏',
              key: 'setting:5',
            },
            {
              label: <Button>退出</Button>,
              key: 'setting:6',
            },
          ],
        }
      ]
    },
  ]
  //头部导航切换
  const Navigate = useNavigate()
  const changeMenu = useCallback(({ key, keyPath }) => {
    console.log('changeMenu', key, keyPath);
    Navigate(key)
  })
  //点击logo跳转到首页
  const changeHome = useCallback(() => {
    Navigate('/home')
  })

  //点击search跳转到搜索页面
  const changeSearch = useCallback(() => {
    Navigate('/search')
  })

  return (
    <Layout className="layout">
      <Header>
        <div className="logo" onClick={changeHome}></div>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultOpenKeys={['/home']}
          defaultSelectedKeys={['/home']}
          overflowedIndicator={<EllipsisOutlined />}
          items={menu}
          onClick={changeMenu}
        // style={{marginLeft:'-40%'}}
        />
        <div className="search_avatar">
          <div className="search">
            <SearchOutlined style={{ fontSize: '18px', lineHeight: '64px', color: '#fff' }} onClick={changeSearch} />
          </div>
          <div className="avatar">
            <Menu mode="horizontal" items={items} />
          </div>
        </div>
      </Header>
      <Content>
        <div className="site-layout-content">
          <Routes>
            <Route path='/login' element={<Login />} />
            <Route path='/reg' element={<Reg />} />
            <Route path='/home' element={<Home />} />
            <Route path='/exercise' element={<Exercise />} />
            <Route path='/add' element={<Add />} />
            <Route path='/mine/*' element={<Mine />} />
            <Route path='/company' element={<Company />} />
            <Route path='/tags' element={<Tags />} />
            <Route path='/search' element={<Search />} />
            <Route path='/iq/*' element={<Iqs />} />
            <Route path='/' element={<Navigate to='/home' />} />
          </Routes>
        </div>
      </Content>
      <Footer
        style={{
          textAlign: 'center',
          height: '40px',
          paddingTop: '10px',
        }}
      >
        Ant Design ©2018 Created by BIBLE
      </Footer>
    </Layout>
  )
};
export default App
